<!-- 这是一个验证码组件，用于生成验证码，并返回给父组件 -->

<template>
  <div id="ValidCode" @click="generateCode">
    <span v-for="(item, index) in codeList" :key="index" :style="getRandomStyles()">{{ item }}</span>
  </div>
</template>

<style scoped>
/* 引入css样式 */
@import "ValidCode.css";
</style>

<script setup>
import { ref, watchEffect } from 'vue';

/* 字符集 去掉了部分容易混淆的字符 比如0和o 个人o0经常敲错而已 */
const code = ref('23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz');

/* 循环遍历生成四位验证码 */
const codeList = ref([]);

/* 生成四位验证码 */
function generateCode() {
  const arr = [];
  for (let i = 0; i < 4; i++) {
    let index = getRandomIndex();
    arr.push(code.value[index]);
  }
  codeList.value = arr;
}

/* 生成随机索引 */
function getRandomIndex() {
  return Math.floor(Math.random() * code.value.length);
}

/* 获取自由变换随机样式 实现歪七扭八的效果*/
function getRandomStyles() {
  const x = Math.floor(Math.random() * 10) - 5; // -5 到 5
  const y = Math.floor(Math.random() * 10) - 5; // -5 到 5
  const rotate = Math.random() * 10 - 5; // -5 到 5
  return {
    transform: `translate(${x}px, ${y}px) rotate(${rotate}deg)`
  };
}

/* 定义emit */
const emit = defineEmits(['update:modelValue']);

/* 监听codeList的变化，并更新父组件 */
watchEffect(() => {
  emit('update:modelValue', codeList.value.join(''));
});

/* 执行一次 更新验证码 避免初始状态下验证码为空的情况 */
generateCode();

</script>
